<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      border:2px solid red;
    }
  </style>
</head>
<body>
  <!-- 
    任何一个元素（标签）都是一个盒子
    任何一个盒子都可以成为容器
    任何一个容器都可以设置为弹性盒子
    前提：
      盒子要有大小

    1、将容器转为弹性盒子
        display：flex
    2、给弹性盒子设置的属性
      1) flex-direction：设置盒子沿着主轴的排列方向
          默认从左到右：row
              从右到左：row-reverse
              从上到下：column
              从下到上：column-reverse
      2) flex-wrap：设置盒子是否换行
          默认是不换行：nowrap (子元素不论宽度，直接压缩到同一行)
                  换行：wrap
                  换行并倒置：wrap-reverse
      3）flex-flow：是flex-direction和flex-wrap的简写
          flex-flow: row wrap;
      4) justify-content：设置盒子在主轴上的对齐方式
          justify-content: flex-start;沿着主轴左侧开始位置排列(从左到右)
          justify-content: flex-end;沿着主轴右侧开始位置排列(从右到左)
          justify-content: center;沿着主轴中心位置排列(横向居中)
          justify-content: space-between;主轴上两端对齐，相邻元素之间的间隔都相等(分散对齐)
          justify-content: space-around;主轴上相邻元素之间的间隔都相等，最左侧和最右侧间隔一样，但是元素与元素中间的间隔是最左侧和左右侧的两倍
          justify-content: space-evenly;主轴上相邻元素之间的间隔都相等，相邻元素与元素之间的间隔都相等(平均对齐)
      5) align-items设置盒子在交叉轴上的对齐方式
          flex-start | flex-end | center | baseline | stretch;
          align-items:flex-start;沿着交叉轴的方向从父级顶部开始往下排列
          align-items:flex-end;沿着交叉轴的方向从父级底部开始往上排列
          align-items:center:沿着交叉轴的方向从父级中心开始往下排列(垂直居中)
          默认值：align-items:stretch;如果项目未设置高度或设为auto，将占满整个容器的高度
          align-items:baseline;沿着交叉轴的方向按照基准线的位置进行排列
      6）align-content多个轴线起作用，只有一个轴线不起作用，默认值： align-content:stretch;
    




    文档怎么看：
      1、查阅大纲
      2、了解你想要直到的具体内容
      3、到指定板块中找你想要的具体内容

      API文档
  -->
  <div>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
    <span>文本1</span>
    <span>文本2</span>
    <span>文本3</span>
    <span>文本4</span>  
  </div>
</body>
</html>